<template>
  <div style="padding-right: 20px;">
    <el-form label-width="90px">
      <el-form-item label="字段名称">
        <el-input placeholder="请输入字段名称" @blur="configChange" v-model="editingFieldDefinition.showName"/>
      </el-form-item>
      <!--      <el-form-item label="字段别名">-->
      <!--        <el-input placeholder="请输入字段别名" @blur="configChange" v-model="editingFieldDefinition.alias"/>-->
      <!--      </el-form-item>-->
      <el-form-item label="数据库字段">
        <template v-slot:label>
          <el-popover
            placement="top-start"
            title="开发人员专用"
            :width="200"
            trigger="hover">
            <template #reference>
              数据库字段
            </template>
          </el-popover>
        </template>

        <el-input placeholder="请输入数据库字段" @blur="configChange" v-model="editingFieldDefinition.tableFieldName"/>
      </el-form-item>

      <el-form-item label="日期格式">
        <el-select @change="dateFormatChange"
                   v-model="editingFieldDefinition.dateFormat" clearable filterable>
          <el-option v-for="opt in formatOptions" :key="opt.format" :label="opt.title" :value="opt.format"/>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

let defaultConfig = {
  id: undefined,
  fieldName: undefined,
  showName: undefined,
  alias: undefined,
  inputType: 'text',
  component: 'textInput',
  tableFieldName: undefined,
  dateType: 'datetime',
  dateFormat: 'YYYY-MM-DD',
};

export default {
  name: "DateInputConfiguration",
  props: {
    editingFieldDefinition: {
      type: Object,
      default: () => JSON.parse(JSON.stringify(defaultConfig))
    },
  },
  data() {
    return {
      config: JSON.parse(JSON.stringify(defaultConfig)),
      formatOptions: [
        {key: 1, type: 'year', format: 'YYYY', title: '年'},
        {key: 2, type: 'month', format: 'YYYY-MM', title: '月'},
        {key: 3, type: 'date', format: 'YYYY-MM-DD', title: '年月日'},
        {key: 4, type: 'date', format: 'YYYY/MM/DD', title: 'YYYY/MM/DD'},
        {key: 5, type: 'datetime', format: 'YYYY-MM-DD HH:mm:ss', title: 'YYYY-MM-DD HH:mm:ss'},
        {key: 6, type: 'datetime', format: 'YYYY/MM/DD HH/mm/ss', title: 'YYYY/MM/DD HH/mm/ss'},
      ]
    };
  },
  methods: {
    setData({fieldDefinition, selectedElement}) {
      this.config = fieldDefinition;
      this.initShowName = fieldDefinition.showName;
    },
    dateFormatChange() {
      let formatOptions = this.formatOptions;
      this.$nextTick(() => {
        for (let i = 0; i < formatOptions.length; i++) {
          if (formatOptions[i].format === this.editingFieldDefinition.dateFormat) {
            this.editingFieldDefinition.dateType = formatOptions[i].type;
          }
        }
      });
    },
    configChange() {
      if (!this.config.showName || this.config.showName === '') this.config.showName = this.initShowName;
      this.$emit('changeConfig', this.config);
    },
  }
};
</script>

<style scoped>

</style>
